<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<script type="text/javascript" src="../js/prototype.js"></script>
<script language="Javascript">
function fnSubmit()
{
	if(fnValidateMandatory() == false){
		return false;
	}
	
	if(validateImageUpload(document.getElementById("question_image").value.toUpperCase()) == false){
		return false;
	}	
	if(validateImageUpload(document.getElementById("answer_option_image1").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image2").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image3").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image4").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image5").value.toUpperCase()) == false){
		return false;
	}
	document.questionForm.action='/createQuestion.do?';
	document.questionForm.submit();
}

function fnValidateMandatory(){
	if(document.getElementById("question_statement").value == ""){
		alert('Question Statement is Mandatory');
		return false;
	}
	if(document.getElementById("question_category_id").value == ""){
		alert('Question Category is Mandatory');
		return false;
	}
	if(document.getElementById("question_level_id").value == ""){
		alert('Question Level is Mandatory');
		return false;
	}
	var isCorrect = document.getElementsByName("is_correct");
	var isChecked= false;
	for(i=0;i<isCorrect.length;i++){
		if(isCorrect[i].checked){
			if(isCorrect[i].disabled == false){
			isChecked=true;
			break;
			}
		}
	}
	<logic:equal name="questionForm" property="is_updatable" value="true">
	if(!isChecked){
		alert('Please select Correct Answer');
		return false;
	}
	</logic:equal>
	return true;
}

function fnUpdate()
{
	if(fnValidateMandatory() == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("question_image").value.toUpperCase()) == false){
		return false;
	}	
	if(validateImageUpload(document.getElementById("answer_option_image1").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image2").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image3").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image4").value.toUpperCase()) == false){
		return false;
	}	
	if(validateImageUpload(document.getElementById("answer_option_image5").value.toUpperCase()) == false){
		return false;
	}
	document.questionForm.screen_type.value="Edit";
	document.questionForm.action='/updateQuestion.do?';
	document.questionForm.submit();
}

function validateImageUpload(filePath)
{	
	if(filePath.length == 0 || (filePath.length - filePath.indexOf(".JPG"))==4 || (filePath.length - filePath.indexOf(".BMP"))==4)
	{		
		return true;
	} 
	else
	{
		alert("Only JPG and BMP file can be uploaded");
		return false;
	}	
}
function enableRadio(index){
	var ansOpt = document.getElementsByName("answer_option");
	var isCorrect = document.getElementsByName("is_correct");	
	var idValue = "answer_option_image"+(parseInt(index)+1);
	if(ansOpt[index].value!=""){
		isCorrect[index].disabled = false;
		document.getElementById(idValue).disabled = false;
	}else{
		isCorrect[index].disabled = true;
		document.getElementById(idValue).disabled = true;
	}
}
</script>
<html:form action="/question" enctype="multipart/form-data">
	<html:hidden property="screen_type"/>
	<html:hidden property="question_id"/>
	<html:hidden property="is_updatable" styleId="is_updatable"/>
	<table width="550" border="0" align="center" cellspacing="0" cellpadding="0">
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<logic:equal name="questionForm" property="screen_type" value="Edit">
				<td class="heading1" colspan="2">Edit Question <logic:equal name="questionForm" property="is_updatable" value="false">
			(Not Updatable)
			</logic:equal> </td>
			</logic:equal>
			<logic:equal name="questionForm" property="screen_type" value="View">
				<td class="heading1">View Question</td>
			</logic:equal>
			<logic:equal name="questionForm" property="screen_type" value="">
				<td class="heading1">Add Question</td>
			</logic:equal>
		</tr>		
		
		<tr>
			<td valign="top">&nbsp;</td>
		</tr>
		<tr>
			<td valign="top"><jsp:include page="showErrorMessage.jsp" /></td>
		</tr>
		<tr>
			<td>
				<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
					<tr>
						<td align="left" valign="top" class="inputtext">Statement<font class="asterix">*</font></td>
						<td valign="middle"><html:textarea property="question_statement" styleId="question_statement" styleClass="form4" cols="4" rows="2"/>
						</td>
					</tr>
					<logic:equal name="questionForm" property="screen_type" value="View">
					<tr>
						<td align="left" valign="top" >&nbsp</td>
						<td>
						<logic:present name="questionForm" property="question_image_id">
				
						<%String contextPath = session.getAttribute("contextPath").toString();%>
						<img src='<%=contextPath+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="question_image_id"/>'
						alt="No Image Present">

						</logic:present>
						
						</td>
					</tr>
					</logic:equal>
					<tr>
						<td align="left" valign="top" class="inputtext">Category<font class="asterix">*</font></td>
						<td  valign="middle">
            				<html:select property="question_category_id" styleId="question_category_id" styleClass="form3">
								<html:option value="">--Please Select--</html:option>
								<logic:present name="questionForm" property="categories">
								<logic:iterate name="questionForm" property="categories" id="category" >
								<bean:define id="dID" name="category" property="id" />
								<html:option  value="<%=dID.toString()%>"><bean:write name="category" property="name"/></html:option>						
								</logic:iterate>
								</logic:present>	
							</html:select>
						</td>
					</tr>
					<tr>
						<td align="left" valign="top" class="inputtext">Difficulty Level<font class="asterix">*</font></td>
						<td  valign="middle">
            				<html:select property="question_level_id" styleId="question_level_id" styleClass="form3">
								<html:option value="">--Please Select--</html:option>
								<logic:present name="questionForm" property="levels">
								<logic:iterate name="questionForm" property="levels" id="level" >
								<bean:define id="dID" name="level" property="id" />
								<html:option  value="<%=dID.toString()%>"><bean:write name="level" property="name"/></html:option>						
								</logic:iterate>
								</logic:present>	
							</html:select>
						</td>
					</tr>
					<tr>
						<td align="left" valign="top" class="inputtext">Status<font class="asterix">*</font></td>
						<td valign="middle">
							<html:select styleClass="form3" property="question_status" styleId="question_status" style=":width=25%">
								<html:option value="2">Active</html:option>
								<html:option value="3">InActive</html:option>
							</html:select>
						</td>
					</tr>
					<tr>
						<logic:equal name="questionForm" property="screen_type" value="">
							<td align="left" valign="top" class="inputtext">Question Image</td>
							<td valign="middle"><html:file property="question_image" styleId="question_image"/></td>
						</logic:equal>
						<logic:equal name="questionForm" property="screen_type" value="Edit">
							<td align="left" valign="top" class="inputtext">Question Image</td>
							<td valign="middle"><html:file property="question_image" styleId="question_image"/></td>
						</logic:equal>
					</tr>
					<tr>
						<td height="25" colspan="4" valign="top" >&nbsp;</td>
					</tr>
					<tr>
						<tr>
							<td colspan="3" class="heading2">Answer Options</td>
						</tr>
						<tr>
						<td height="10" colspan="2" align="center" valign="top" >&nbsp;</td>
					</tr>
						<td colspan="4" valign="top" bgcolor="#CCCCCC">
							<table width="550" border="0" cellspacing="0" cellpadding="0" class="tbletext">
							<tr>
								<td align="center">Is Correct</td><td align="center">Statement</td><td align="center">Image</td>
							</tr>
						<tr>
							<td align="center"><html:radio property="is_correct" styleId="is_correct" value="1" disabled="true"/></td>
							<td align="center"><html:textarea property="answer_option" styleId="answer_option" cols="4" rows="2" styleClass="form5" onclick="javascript:enableRadio('0');" onblur="javascript:enableRadio('0');"/></td>
							<logic:notEqual name="questionForm" property="screen_type" value="View">
							<td align="center"><html:file property="answer_option_image1" styleId="answer_option_image1" disabled="true" /></td>
							</logic:notEqual>
							<logic:equal name="questionForm" property="screen_type" value="View">
							<td align="center">
							<logic:present name="questionForm" property="answer_option_image1_id">
								<%String contextPath1 = session.getAttribute("contextPath").toString();%>
								<img src='<%=contextPath1+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="answer_option_image1_id"/>'
									alt="No Image Present">
							</logic:present>
							</td>
							</logic:equal>
						</tr>
						
						<tr>
							<td align="center"><html:radio property="is_correct" styleId="is_correct" value="2" disabled="true"/></td>
							<td align="center"><html:textarea property="answer_option" styleId="answer_option" cols="4" rows="2" styleClass="form5" onclick="javascript:enableRadio('1');" onblur="javascript:enableRadio('1');"/></td>
							<logic:notEqual name="questionForm" property="screen_type" value="View">
							<td align="center"> <html:file property="answer_option_image2" styleId="answer_option_image2" disabled="true" /></td>
							</logic:notEqual>
							<logic:equal name="questionForm" property="screen_type" value="View">
							<td align="center">
							<logic:present name="questionForm" property="answer_option_image2_id">
								<%String contextPath2 = session.getAttribute("contextPath").toString();%>
								<img src='<%=contextPath2+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="answer_option_image2_id"/>'
									alt="No Image Present">
							</logic:present>
							</td>
							</logic:equal>
						</tr>

						<tr>
							<td align="center"><html:radio property="is_correct" styleId="is_correct" value="3" disabled="true"/></td>
							<td align="center"><html:textarea property="answer_option" styleId="answer_option" cols="4" rows="2" styleClass="form5" onclick="javascript:enableRadio('2');" onblur="javascript:enableRadio('2');"/></td>
							<logic:notEqual name="questionForm" property="screen_type" value="View">
							<td align="center"> <html:file property="answer_option_image3" styleId="answer_option_image3" disabled="true" /></td>
							</logic:notEqual>
							<logic:equal name="questionForm" property="screen_type" value="View">
							<td align="center">
							<logic:present name="questionForm" property="answer_option_image3_id">
								<%String contextPath3 = session.getAttribute("contextPath").toString();%>
								<img src='<%=contextPath3+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="answer_option_image3_id"/>'
									alt="No Image Present">
							</logic:present>
							</td>
							</logic:equal>
						</tr>
						<tr>
							<td align="center"><html:radio property="is_correct" styleId="is_correct" value="4" disabled="true"/></td>
							<td align="center"><html:textarea property="answer_option" styleId="answer_option" cols="4" rows="2" styleClass="form5" onclick="javascript:enableRadio('3');" onblur="javascript:enableRadio('3');"/></td>
							<logic:notEqual name="questionForm" property="screen_type" value="View">
							<td align="center"> <html:file property="answer_option_image4" styleId="answer_option_image4" disabled="true" /></td>
							</logic:notEqual>
							<logic:equal name="questionForm" property="screen_type" value="View">
							<td align="center">
							<logic:present name="questionForm" property="answer_option_image4_id">
								<%String contextPath4 = session.getAttribute("contextPath").toString();%>
								<img src='<%=contextPath4+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="answer_option_image4_id"/>'
									alt="No Image Present">
							</logic:present>
							</td>
							</logic:equal>
						</tr>
						<tr>
							<td align="center"><html:radio property="is_correct" styleId="is_correct" value="5" disabled="true"/></td>
							<td align="center"><html:textarea property="answer_option" styleId="answer_option" cols="4" rows="2" styleClass="form5"   onclick="javascript:enableRadio('4');" onblur="javascript:enableRadio('4');"/></td>
							<logic:notEqual name="questionForm" property="screen_type" value="View">
							<td align="center"> <html:file property="answer_option_image5" styleId="answer_option_image5" disabled="true"/></td>
							</logic:notEqual>
							<logic:equal name="questionForm" property="screen_type" value="View">
							<td align="center">
							<logic:present name="questionForm" property="answer_option_image5_id">
								<%String contextPath5 = session.getAttribute("contextPath").toString();%>
								<img src='<%=contextPath5+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="answer_option_image5_id"/>'
									alt="No Image Present">
							</logic:present>
							</td>
							</logic:equal>
						</tr>
						</table>
						</td>
					</tr>
					<tr>
						<td height="25" colspan="4" align="center" valign="top" >&nbsp;</td>
					</tr>
					<tr>
						<td colspan="4" valign="top"  bgcolor="#CCCCCC"><img src="images/zero.gif" width="1" height="1" /></td>
					</tr>
					<tr>
						<td height="25" colspan="4" align="center" valign="top" >&nbsp;</td>
					</tr>
					<tr>
						<logic:equal name="questionForm" property="screen_type" value="Edit">
							<td height="25" colspan="4" align="center" valign="top">			
								<input type="button" class="imageButton" value="Update" onClick="javascript:fnUpdate()">								
							</td>
						</logic:equal>
						<logic:equal name="questionForm" property="screen_type" value="">
							<td height="25" colspan="4" align="center" valign="top">
								<input type="button" class="imageButton" value="Submit" onClick="javascript:fnSubmit()">
							</td>
						</logic:equal>
					</tr>
					<tr>
						<td height="25" colspan="4" align="center" valign="top" >&nbsp;</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<logic:equal name="questionForm" property="screen_type" value="View">
		<script language="JavaScript">	
			var elements = document.forms[0].elements;
			var type = "";
			for(j=0;j<elements.length;j++){
				type = elements[j].type;
				if(type == 'text' || type == 'select-one' || type == 'radio' || type == 'checkbox' || type == 'button' || type == 'textarea') {
					elements[j].disabled=true;
				}
			}
			
		</script>
	</logic:equal>
	<logic:equal name="questionForm" property="screen_type" value="Edit">
	<script language="JavaScript">

	var isCorrectOpt = document.getElementsByName("is_correct");
	<logic:present name="questionForm" property="answer_option" >	
		
	<%int ansIndex1 = 0;%>
	<logic:iterate id="ans" name="questionForm" property="answer_option" >		
			
			if(''!= '<bean:write name="ans"  filter="false" />'){
				isCorrectOpt[<%=ansIndex1%>].disabled=false;
			}
			<%ansIndex1++;%>
							
	</logic:iterate>		
	</logic:present>

	</script>
	</logic:equal>
		
	<script language="JavaScript">

	<logic:present name="questionForm" property="answer_option" >	
	var ansOpt = document.getElementsByName("answer_option");	
	<%int ansIndex = 0;%>
	<logic:iterate id="ans" name="questionForm" property="answer_option" >		
			
					ansOpt[<%=ansIndex++%>].value= '<bean:write name="ans"  filter="false" />';
							
			</logic:iterate>
			if(ansOpt.length-1 >=<%=ansIndex%>){
				for(i=<%=ansIndex%>;i<5;i++){
					ansOpt[i].value="";
				}
			}
		
	</logic:present>
	</script>
	<script language="JavaScript">


	<logic:equal name="questionForm" property="is_updatable" value="false">
		var ansOpt = document.getElementsByName("answer_option");
		var isCorrect = document.getElementsByName("is_correct");
		document.getElementById("question_statement").disabled=true;
		document.getElementById("question_category_id").disabled=true;
		document.getElementById("question_level_id").disabled=true;		
		document.getElementById("answer_option_image1").disabled=true;
		document.getElementById("answer_option_image2").disabled=true;
		document.getElementById("answer_option_image3").disabled=true;
		document.getElementById("answer_option_image4").disabled=true;	
		document.getElementById("answer_option_image5").disabled=true;
		
		document.getElementById("question_image").disabled=true;
		for(i=0;i<ansOpt.length;i++){
			ansOpt[i].disabled=true ;
		}
		for(i=0;i<isCorrect.length;i++){
			isCorrect[i].disabled=true;
		}
	</logic:equal>
	</script>
	
</html:form>